<!--  -->
<template>
  <div class="page">
    <div class="tableBox">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 出售中商品 -->
        <el-tab-pane class="el-tabs" label="出售中商品" name="first">
          <!-- 商品分类，商品搜索功能 -->
          <div class="shop">
            <!--   商品分类功能 -->
            <div class="classify">
              <span>商品分类:</span>
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link"
                  >{{ selectTitle }}
                  <i class="el-icon-arrow el-icon--right" />
                </span>
                <!-- 下拉 -->
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="(item, index) in optionsSource"
                    :key="index"
                    :command="item.label"
                  >
                    {{ item.label }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <!-- 商品搜索功能 -->
            <div class="search">
              <span>商品搜索:</span>
              <el-input
                v-model="message"
                placeholder="请输入商品名称，关键字，商品ID"
                @change="searchInput"
              />
              <el-button type="info" size="mini" icon="el-icon-search" />
            </div>
          </div>
          <!-- 添加商品 -->
          <div class="addList">
            <el-button type="primary" class="addtn" @click="clickList">
              添加商品
            </el-button>
          </div>
          <!-- 表格 -->

          <el-table
            :data="searchList.length ? searchList : options"
            border
            style="width: 100%"
            max-height="400"
          >
            <el-table-column prop="id" label="ID" align="center" />
            <el-table-column label="商品图" align="center">
              <template slot-scope="scope">
                <el-image
                  style="width: 30px; height: 30px"
                  :src="scope.row.img"
                  :preview-src-list="img"
                />
              </template>
            </el-table-column>
            <el-table-column prop="title" label="商品名称" align="center" />
            <el-table-column prop="price" label="商品售价" align="center" />
            <el-table-column prop="sale" label="销量" align="center" />
            <el-table-column prop="num" label="库存" align="center" />
            <el-table-column prop="sort" label="排序" align="center" />
            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.flag" />
              </template>
            </el-table-column>
            <el-table-column prop="time" label="操作时间" align="center" />
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <!-- 编辑弹框 -->
                <el-button type="text" @click="editBtn(scope.row)">
                  编辑
                </el-button>
                <el-dialog
                  title="提示"
                  :visible.sync="dialogVisible"
                  width="30%"
                  :before-close="handleClose"
                >
                  <el-form
                    ref="ruleForm"
                    :model="ruleForm"
                    :rules="rules"
                    label-width="100px"
                    class="demo-ruleForm"
                  >
                    <el-form-item label="商品名称" prop="title">
                      <el-input v-model="ruleForm.title" />
                    </el-form-item>
                    <el-form-item label="商品售价" prop="price">
                      <el-input v-model="ruleForm.price" />
                    </el-form-item>
                  </el-form>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button
                      type="primary"
                      @click="sureEditBtn('ruleForm', 'table')"
                      >确 定</el-button
                    >
                  </span>
                </el-dialog>
                <!-- 加入回收站 -->
                <el-button
                  type="text"
                  @click="delOpen(scope.$index, scope.row, 'addBinList')"
                >
                  加入回收站
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="pageFun">
            <div />
            <!-- 分页 -->
            <el-pagination
              background
              :current-page="pageIndex"
              :page-size="pageSize"
              layout="prev, pager, next"
              :total="optionsSource[activeIndex].children.length"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>

        <!-- 仓库中商品 -->
        <el-tab-pane label="仓库中商品" name="second">
          <!-- 商品分类，商品搜索功能 -->
          <div class="shop">
            <!--   商品分类功能 -->
            <div class="classify">
              <span>商品分类:</span>
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link"
                  >{{ selectTitle }}
                  <i class="el-icon-arrow el-icon--right" />
                </span>
                <!-- 下拉 -->
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="(item, index) in optionsSource"
                    :key="index"
                    :command="item.label"
                  >
                    {{ item.label }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <!-- 商品搜索功能 -->
            <div class="search">
              <span>商品搜索:</span>
              <el-input
                v-model="message"
                placeholder="请输入商品名称，关键字，商品ID"
                @change="searchInput"
              />
              <el-button type="info" size="mini" icon="el-icon-search" />
            </div>
          </div>
          <!-- 添加商品 -->
          <div class="addList">
            <el-button type="primary" class="addtn" @click="clickList">
              添加商品
            </el-button>
          </div>
          <!-- 表格 -->

          <el-table
            :data="searchList.length ? searchList : options"
            border
            style="width: 100%"
            max-height="400"
          >
            <el-table-column prop="id" label="ID" align="center" />
            <el-table-column label="商品图" align="center">
              <template slot-scope="scope">
                <el-image
                  style="width: 30px; height: 30px"
                  :src="scope.row.img"
                  :preview-src-list="img"
                />
              </template>
            </el-table-column>
            <el-table-column prop="title" label="商品名称" align="center" />
            <el-table-column prop="price" label="商品售价" align="center" />
            <el-table-column prop="sale" label="销量" align="center" />
            <el-table-column prop="num" label="库存" align="center" />
            <el-table-column prop="sort" label="排序" align="center" />
            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.flag" />
              </template>
            </el-table-column>
            <el-table-column prop="time" label="操作时间" align="center" />
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <!-- 编辑弹框 -->
                <el-button type="text" @click="editBtn(scope.row)">
                  编辑
                </el-button>
                <el-dialog
                  title="提示"
                  :visible.sync="dialogVisible"
                  width="30%"
                  :before-close="handleClose"
                >
                  <el-form
                    ref="ruleForm"
                    :model="ruleForm"
                    :rules="rules"
                    label-width="100px"
                    class="demo-ruleForm"
                  >
                    <el-form-item label="商品名称" prop="title">
                      <el-input v-model="ruleForm.title" />
                    </el-form-item>
                    <el-form-item label="商品售价" prop="price">
                      <el-input v-model="ruleForm.price" />
                    </el-form-item>
                  </el-form>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button
                      type="primary"
                      @click="sureEditBtn('ruleForm', 'table')"
                      >确 定</el-button
                    >
                  </span>
                </el-dialog>
                <!-- 加入回收站 -->
                <el-button
                  type="text"
                  @click="delOpen(scope.$index, scope.row, 'addBinList')"
                >
                  加入回收站
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="pageFun">
            <div />
            <!-- 分页 -->
            <el-pagination
              background
              :current-page="pageIndex"
              :page-size="pageSize"
              layout="prev, pager, next"
              :total="optionsSource[activeIndex].children.length"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>

        <!-- 已经售罄商品 -->
        <el-tab-pane label="已经售罄商品" name="third">
          <!-- 商品分类，商品搜索功能 -->
          <div class="shop">
            <!--   商品分类功能 -->
            <div class="classify">
              <span>商品分类:</span>
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link"
                  >{{ selectTitle }}
                  <i class="el-icon-arrow el-icon--right" />
                </span>
                <!-- 下拉 -->
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="(item, index) in optionsSource"
                    :key="index"
                    :command="item.label"
                  >
                    {{ item.label }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <!-- 商品搜索功能 -->
            <div class="search">
              <span>商品搜索:</span>
              <el-input
                v-model="message"
                placeholder="请输入商品名称，关键字，商品ID"
                @change="searchInput"
              />
              <el-button type="info" size="mini" icon="el-icon-search" />
            </div>
          </div>
          <!-- 添加商品 -->
          <div class="addList">
            <el-button type="primary" class="addtn" @click="clickList">
              添加商品
            </el-button>
          </div>
          <!-- 表格 -->

          <el-table
            :data="searchList.length ? searchList : options"
            border
            style="width: 100%"
            max-height="400"
          >
            <el-table-column prop="id" label="ID" align="center" />
            <el-table-column label="商品图" align="center">
              <template slot-scope="scope">
                <el-image
                  style="width: 30px; height: 30px"
                  :src="scope.row.img"
                  :preview-src-list="img"
                />
              </template>
            </el-table-column>
            <el-table-column prop="title" label="商品名称" align="center" />
            <el-table-column prop="price" label="商品售价" align="center" />
            <el-table-column prop="sale" label="销量" align="center" />
            <el-table-column prop="num" label="库存" align="center" />
            <el-table-column prop="sort" label="排序" align="center" />
            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.flag" />
              </template>
            </el-table-column>
            <el-table-column prop="time" label="操作时间" align="center" />
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <!-- 编辑弹框 -->
                <el-button type="text" @click="editBtn(scope.row)">
                  编辑
                </el-button>
                <el-dialog
                  title="提示"
                  :visible.sync="dialogVisible"
                  width="30%"
                  :before-close="handleClose"
                >
                  <el-form
                    ref="ruleForm"
                    :model="ruleForm"
                    :rules="rules"
                    label-width="100px"
                    class="demo-ruleForm"
                  >
                    <el-form-item label="商品名称" prop="title">
                      <el-input v-model="ruleForm.title" />
                    </el-form-item>
                    <el-form-item label="商品售价" prop="price">
                      <el-input v-model="ruleForm.price" />
                    </el-form-item>
                  </el-form>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button
                      type="primary"
                      @click="sureEditBtn('ruleForm', 'table')"
                      >确 定</el-button
                    >
                  </span>
                </el-dialog>
                <!-- 加入回收站 -->
                <el-button
                  type="text"
                  @click="delOpen(scope.$index, scope.row, 'addBinList')"
                >
                  加入回收站
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="pageFun">
            <div />
            <!-- 分页 -->
            <el-pagination
              background
              :current-page="pageIndex"
              :page-size="pageSize"
              layout="prev, pager, next"
              :total="optionsSource[activeIndex].children.length"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>

        <!-- 商品回收站 -->
        <el-tab-pane label="商品回收站" name="fourth">
          <div class="shop">
            <!--   商品分类功能 -->
            <div class="classify">
              <span>商品分类:</span>
              <el-input placeholder="请选择" class="delSelect" />
            </div>
            <!-- 商品搜索功能 -->
            <div class="search">
              <span>商品搜索:</span>
              <el-input
                v-model="message"
                placeholder="请输入商品名称，关键字，商品ID"
                @change="searchInput"
              />
              <el-button type="info" size="mini" icon="el-icon-search" />
            </div>
          </div>
          <!-- 添加商品 -->
          <div class="addList">
            <el-button type="primary" class="addBtn">
              添加商品
            </el-button>
          </div>
          <!-- 表格 -->
          <el-table :data="binList" style="width: 100%" border max-height="400">
            <el-table-column prop="id" label="ID" />
            <el-table-column label="商品图">
              <template slot-scope="scope">
                <el-image
                  style="width: 50px; height: 50px"
                  :src="scope.row.img"
                  :preview-src-list="img"
                />
              </template>
            </el-table-column>
            <el-table-column prop="title" label="商品名称" />
            <el-table-column prop="price" label="商品售价" />
            <el-table-column prop="sale" label="销量" />
            <el-table-column prop="num" label="库存" />
            <el-table-column prop="sort" label="排序" />
            <el-table-column label="状态">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.flag" />
              </template>
            </el-table-column>
            <el-table-column prop="time" label="操作时间" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <!-- 编辑弹框 -->
                <el-button type="text" @click="editBtn(scope.row)">
                  编辑
                </el-button>
                <el-dialog
                  title="提示"
                  :visible.sync="dialogVisible"
                  width="30%"
                  :before-close="handleClose"
                >
                  <el-form
                    ref="ruleForm"
                    :model="ruleForm"
                    :rules="rules"
                    label-width="100px"
                    class="demo-ruleForm"
                  >
                    <el-form-item label="商品名称" prop="title">
                      <el-input v-model="ruleForm.title" />
                    </el-form-item>
                    <el-form-item label="商品售价" prop="price">
                      <el-input v-model="ruleForm.price" />
                    </el-form-item>
                  </el-form>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button
                      type="primary"
                      @click="sureEditBtn('ruleForm', 'bin')"
                      >确 定</el-button
                    >
                  </span>
                </el-dialog>
                <!-- 恢复 -->
                <el-button
                  type="text"
                  @click="delOpen(scope.$index, scope.row, 'recoverItem')"
                >
                  恢复商品
                </el-button>
                <!-- 永久删除 -->
                <el-button
                  type="text"
                  @click="delOpen(scope.$index, scope.row, 'shiftDeleteItem')"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getdataList } from "../../api/page";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      //列表默认值
      options: [],
      // 源数据
      optionsSource: [],
      //默认下标
      activeIndex: 0,
      //选择器起始状态
      selectValue: "",
      selectDataList: [],
      //下拉分类默认值
      selectTitle: "请选择",
      //tab切换 默认值
      activeName: "first",
      //上架选择器起始状态
      switchValue: true,
      //搜索数组
      searchList: [],
      //起始页数
      pageIndex: 1,
      //每页条数
      pageSize: 6,
      //搜索框默认状态
      message: "",
      //回收站
      binList: [],
      //编辑弹框初始状态
      dialogVisible: false,
      //编辑表单默认值
      ruleForm: {
        title: "",
        price: ""
      },
      editIndex: 0,
      //编辑规则
      rules: {
        title: [
          { required: true, message: "不能为空", trigger: "blur" },
          { min: 7, max: 20, message: "长度在 7 到 20 个字符", trigger: "blur" }
        ],
        price: [{ required: true, message: "不能为空", trigger: "blur" }]
      },
      //起始页数
      currentPage4: 1
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    this.getList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    //请求数据
    async getList() {
      // this.pageIndex = index;
      const res = await getdataList({
        pageSize: this.pageSize,
        pageIndex: this.pageIndex,
        active: this.activeIndex
      });
      console.log("res", res);
      if (res.code === 20000) {
        this.options = [...res.dataList];
        this.optionsSource = [...res.data.data];
      }
      this.setSortShopList();
    },
    //tab切换
    handleClick() {
      this.getList();
    },
    //下拉分类切换
    handleCommand(command) {
      //清空searchList
      this.searchList = [];
      //改变下拉的标题
      this.selectTitle = command;
      //根据下拉标题寻找下标渲染列表
      let flag = this.optionsSource.findIndex(item => {
        return item.label === command;
      });
      this.activeIndex = flag;
    },
    //双向绑定模糊搜索
    searchInput(e) {
      console.log(e);
      this.searchList = this.options.filter(item => {
        return item.title.includes(e) || JSON.stringify(item.id) === e;
      });
    },
    //列表正序
    setSortShopList() {
      this.options.sort((a, b) => {
        return a.sort - b.sort;
      });
    },
    //回收站倒序
    setSortBinList() {
      this.binList.sort((a, b) => {
        return b.sort - a.sort;
      });
    },
    //加入回收站
    addBinList(index, row) {
      this.searchList = [];
      this.options.splice(index, 1);
      this.binList.push(row);
      this.setSortBinList();
    },

    //从回收站中恢复
    recoverShop(index, row) {
      this.binList.splice(index, 1);
      this.options.push(row);
      this.setSortShopList();
    },
    //删除回收站中商品
    delRecoverShop(index) {
      this.binList.splice(index, 1);
    },
    //回收站弹框
    delOpen(index, row, type) {
      if (type === "addBinList") {
        this.$confirm("此操作将加入回收站, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.addBinList(index, row);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else if (type === "recoverItem") {
        this.$confirm("此操作将数据恢复到仓库, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.recoverShop(index, row);
            this.$message({
              type: "success",
              message: "恢复成功!"
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消恢复"
            });
          });
      } else if (type === "shiftDeleteItem") {
        this.$confirm("此操作将永久删除数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.delRecoverShop(index);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },

    //编辑弹框开关
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    //编辑功能
    editBtn(row) {
      this.dialogVisible = true;
      this.editIndex = row.id;
      this.ruleForm.title = row.title;
      this.ruleForm.price = row.price;
    },
    //编辑确认按钮
    sureEditBtn(formName, type) {
      if (type === "table") {
        this.$refs[formName].validate(valid => {
          if (valid) {
            alert("编辑成功!");
            this.options.forEach(item => {
              if (item.id === this.editIndex) {
                item.title = this.ruleForm.title;
                item.price = this.ruleForm.price;
                return item;
              }
            });
            this.dialogVisible = false;
          } else {
            console.log("error submit!!");
            this.dialogVisible = true;
            return false;
          }
        });
      } else if (type === "bin") {
        this.$refs[formName].validate(valid => {
          if (valid) {
            alert("编辑成功!");
            this.binList.forEach(item => {
              if (item.id === this.editIndex) {
                item.title = this.ruleForm.title;
                item.price = this.ruleForm.price;
                return item;
              }
            });
            this.dialogVisible = false;
          } else {
            console.log("error submit!!");
            this.dialogVisible = true;
            return false;
          }
        });
      }
    },

    //分页功能
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    async handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageIndex = val;
      const res = await getdataList({
        pageSize: this.pageSize,
        pageIndex: this.pageIndex,
        active: this.activeIndex
      });
      if (res.code === 20000) {
        this.options = [...res.dataList];
        this.optionsSource = [...res.data.data];
        this.setSortShopList();
      }
    },
    //添加功能
    clickList() {
      this.$router.push({ name: "Goaddlist" });
    }
  }
};
</script>
<style scoped>
.page {
  width: 100%;
  height: 100vh;
  background: #fff;
}
.tableBox {
  width: 98%;
  height: 550px;
  margin: 0 1.25rem;
  background: #fff;
}
.el-tabs {
  padding: 18px 0 0 15px;
}
.el-tab-pane {
  padding: 0;
}
.shop {
  width: 80%;
  height: auto;
  display: flex;
  align-items: center;
  padding: 40px 0;
}
.classify {
  width: 15%;
  height: auto;
  align-items: center;
  margin-right: 20px;
}
.search {
  width: 30%;
  height: auto;
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.classify span,
.search span {
  width: 150px;
  margin-right: 15px;
}
.addList {
  margin-bottom: 50px;
}
.title {
  text-align: center;
}
.delSelect {
  width: 100px;
}
.pageFun {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px;
}
</style>
